import { View, CommonEvent, Input, Text } from "@tarojs/components";
import { useState } from 'react'
import Taro from '@tarojs/taro'
import './index.scss';

interface LgSearchProps {
  type?: 'A' | 'B',
  placeholder?: string,
  value?: string,
  onConfirm?: (value: string | object, event?: CommonEvent) => void,
  onInput?: (value: string | object, event?: CommonEvent) => void,
  onFocus?: (event?: CommonEvent) => void,
  onBlur?: (event?: CommonEvent) => void,
  searchList?: object[] | string[],
  searchAttr?: string,
  choSearchItem?: (value: string | object) => void,  
  imageAttr?: string,
  closeBtnName?: string,
  className?: string,
  style?: string | object
}

export default function LgSearch(props: LgSearchProps) {
  const type = props.type || 'A'
  const [showBInput, setShowB] = useState(type == 'A');
  const [value, setVal] = useState(props.value || "");
  const [focus, setfocus] = useState(false);
  const onFocus = () => {
    setfocus(true);
    props.onFocus && props.onFocus();
  }
  const onBlur = () => {
    setfocus(false);
    props.onBlur && props.onBlur();
  }
  const onInput = (e) => {
    let { value } = e.detail;
    setVal(value);
    props.onInput && props.onInput(value);
  }
  const onConfirm = () => {
    props.onConfirm && props.onConfirm(value);
  }
  const clearInput = () => {
    setVal("");
    props.onConfirm && props.onConfirm("");
  }

  const hidecloseBtnName = () => {
    setShowB(false);
  }
  const handShowBInput = () => {
    if (type == "B" && !showBInput) {
      setShowB(true);
    }
  }
  const formatSearchText = (text) => {
    if (!text) return ""
    let index = text.indexOf(value);
    if (index == -1) return text;
    var headText = text.substr(0, index);
    var endText = text.substr(index + value.length);
    return <Text>{headText}<Text style="color: #0090ff;">{value}</Text>{endText}</Text>
  }

  const choSearchItem = (e) => {
    var index = e.currentTarget.dataset.index;
    var choData = props.searchList ? props.searchList[index] : "";
    setVal(props.searchAttr ? choData[props.searchAttr] : choData);
    props.choSearchItem && props.choSearchItem(choData);
  }
  return (
    <View className={`lg_search_warp_${type} ${showBInput && type == "B" ? "lg_search_warp_B_show" : ""} ${props.className || ''}`} style={props.style || ""}>
      <View className={"lg_search"} onClick={handShowBInput}>
        <View className={`search_icon icon-b01401 ${focus?' search_icon_focus':''}`} onClick={onConfirm} />
        <Input 
            className="search_input" 
            type='text'
            placeholderClass="search_input_placeholder" 
            confirmType="search"
            placeholder={props.placeholder || "输入文字检索"}
            value={showBInput ? value : "搜索"}
            onFocus={onFocus}
            onBlur={onBlur}
            onInput={onInput}
            onConfirm={onConfirm}
        />
        <View className="lg_search_dele_btn" style={`display:${showBInput && value? "block": "none"}`} onClick={clearInput}>
          <View className="icon-b01701" />
        </View>
      </View>
      {
        props.type && props.type == "B" ?
        <View className="lg_search_close_btn" onClick={hidecloseBtnName}>{props.closeBtnName || "取消"}</View> : null
      }
      <View className="lg_search_list" style={`height: ${showBInput && props.searchList && props.searchList.length ? Taro.pxTransform(props.searchList.length * 100) : "0" }`}>
      {
        props.searchList ? props.searchList.map((o, i) => {
          return <View key={"search_i" + i} className="lg_search_item oneline" data-index={i} onClick={choSearchItem}>
                  {
                    props.imageAttr ? <View className="lg_search_i_image" /> : null
                  }
                  {formatSearchText(props.searchAttr ? o[props.searchAttr] : o)}
                </View>
        }) : null
      }
      </View>
      
    </View>
  )
}
